<template>
	<view>
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="欢迎进入风动社区"></u-loading-page>
		<view class="mine_box" v-if="!loadding">
			<view class="" style="display: flex;justify-content: space-between;">
				<view></view>
				<message :color="'fff'"></message>
			</view>
			<view class="portrait_box">
				<u-avatar :src="src" shape="circle" default-url="/static/default.jpg" size="55"
					style="border: 4rpx #fff solid;" @click="avatar = true"></u-avatar>
				<view class="portrait_name">
					<text class="name">{{userInfo.nickname}}</text>
					<view class="Real_name">
						<text>{{userInfo.mobile}}</text>
						<view class="Real" v-if="userInfo.is_verify !=1" @click="_realname"
							style="background-color: #b0d6ff">未认证</view>
						<view class="Real v_ico" v-else
							style="background-image: linear-gradient(to right, #dce5fc , #8fc9fb);">
							<image src="@/static/V_ico.png" mode=""></image>
							实名认证
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="portrait_list">
				<view class="portrait_cont" @click="profit_info()">
					<text>账户</text>
					<text class="nmb">{{balance}}</text>
				</view>
				<view class="check" @click="profit_info()">
					去提现
					<image class="triangle" src="@/static/sanjiao.png" mode=""></image>
				</view>
			</view> -->
		</view>
		<view class="mine_list_box" v-if="!loadding">
			<view v-for="(item, index) in menu" :key="index">
				<view class="mine_list" @click="manage(item)">
					<view class="list">
						<image :src="item.imgUrl" mode=""></image>
						<text>{{item.name}}</text>
					</view>
					<u-icon name="arrow-right" color="#aeaeae" size="18"></u-icon>
				</view>
				<u-line v-if="index < menu.length"></u-line>
			</view>
			<u-popup :show="show" @close="show = false">
				<view class="phone_box">
					<text class="phone" @click="_customer">{{customer}}</text>
					<text @click.stop="show = false">取消</text>
				</view>
			</u-popup>
			<u-popup :show="avatar" @close="avatar = false">
				<view class="phone_box">
					<view class="avatar_box">
						<text class="" @click="_picture">拍照</text>
						<text class="" @click="_getFile">手机相册选择</text>
					</view>
					<text @click.stop="avatar = false">取消</text>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import message from '@/component/message.vue'
	var util5 = require('@/util/request5.js');
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js'
	export default {
		data() {
			return {
				loadding: true,
				src: '',
				show: false,
				avatar: false,
				userInfo: {},
				balance: '0.00',
				a_File: '',
				customer: '',
				menu: [],
				version: '',
				versionHref: 'version1',
				versionList: [],
				token: '',
			}
		},
		components: {
			message
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userinfo');
			this.token = this.userInfo.token
			this.src = util5.realm_name.substr(0, util5.realm_name.length - 5) + this.userInfo.avatar
			this._balance5()
			this.versionHref = 'version5'
			uni.setTabBarItem({
				index: 1,
				visible: true
			})
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userinfo');
			this.token = this.userInfo.token
			this.src = util5.realm_name.substr(0, util5.realm_name.length - 5) + this.userInfo.avatar
			// this.service5()
			this.versionHref = 'version5'
			this._menu5()
		},
		methods: {
			// 余额列表
			async _balance5() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Balance/totals',
					data: {},
					header: {
						'token': this.userInfo.token
					}
				});
				this.loadding = false
				if (res.code == 1) {
					this.balance = res.data
				}
			},
			// 用户信息
			async getUserInfo5() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'user/getUserInfo',
					// data: {},
					header: {
						'token': this.userInfo.token
					}
				});
				if (res.code == 1) {
					res.data.token = this.token
					this.userInfo = res.data
					uni.setStorageSync('userinfo', res.data);
				}
			},
			//账户明细
			account() {
				uni.navigateTo({
					url: '/pages/' + this.versionHref + '/mine/account/account'
				})
			},
			//银行卡管理
			bank_card() {
				uni.navigateTo({
					url: '/pages/' + this.versionHref + '/mine/profit/bank_card/bank_card'
				})
			},
			//分润收益
			profit_info() {
				var _this = this
				if (this.userInfo.is_verify == 1) {
					uni.navigateTo({
						url: '/pages/' + this.versionHref + '/mine/profit/Cash/Cash'
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '您还没有做实名认证，是否实名认证？',
						success: function(res) {
							if (res.confirm) {
								_this._realname()
							}
						}
					});
				}
			},
			//实名认证
			_realname() {
				uni.navigateTo({
					url: '/pages/' + this.versionHref + '/mine/realname/realname'
				})
			},
			//设置
			setup() {
				uni.navigateTo({
					url: '/pages/' + this.versionHref + '/mine/setup/setup'
				})
			},
			//关于我们
			about_us(id, name) {
				uni.navigateTo({
					url: '/pages/' + this.versionHref + '/mine/aboutus/aboutus?id=' + id + '&name=' + name
				})
			},
			// 申领记录
			applyList() {
				uni.navigateTo({
					url: '/pages/' + this.versionHref + '/mine/apply/apply'
				})
			},
			//更换头像
			_getFile() {
				let _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						pathToBase64(res.tempFilePaths[0])
							.then(base64 => {
								_this.uploadFile5(base64)
								_this.avatar = false
							})
							.catch(error => {
								console.error(error)
							})
					}
				});
			},
			_picture() {
				let _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相机选择
					success: function(res) {
						pathToBase64(res.tempFilePaths[0])
							.then(base64 => {
								_this.uploadFile5(base64)
								_this.avatar = false
							})
							.catch(error => {})
					}
				});
			},
			async uploadFile5(base) {
				const userinfo = uni.getStorageSync('userinfo');
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'common/uploadFile',
					data: {
						file: base
					},
					header: {
						'token': userinfo.token
					}
				});
				uni.hideLoading()
				if (res.code == 1) {
					this.a_File = res.data.url
					this._avatar5()
				}
			},
			async _avatar5() {
				const userinfo = uni.getStorageSync('userinfo');
				const {
					data: res
				} = await this.$myHttp5({
					url: 'user/profile',
					data: {
						avatar: this.a_File
					},
					header: {
						'token': userinfo.token
					}
				});
				if (res.code == 1) {
					uni.showToast({
						title: '上传成功',
						icon: "none"
					});
					userinfo.avatar = this.a_File
					uni.setStorageSync('userinfo', userinfo);
					this.src = util5.API_URL + userinfo.avatar
				}
			},
			// 获取栏目
			async _menu5() {
				const userinfo = uni.getStorageSync('userinfo');
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Menu/lists',
					data: {
						type: 2
					},
					header: {
						'token': userinfo.token
					}
				});
				if (res.code == 1) {
					res.data.map(item => {
						item.imgUrl = util5.API_URL + item.imgUrl
					})
					this.menu = res.data
				}
			},
			// 跳转页面
			manage(item) {
				if (item.type == 1) {
					uni.navigateTo({
						url: item.path
					})
				} else {
					this.show = true
				}
			},
			// 联系客服
			async service5() {
				const userinfo = uni.getStorageSync('userinfo');
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Systemser/system_servc',
					data: {},
					header: {
						'token': userinfo.token
					}
				});
				if (res.code == 1) {
					this.customer = res.data[0].mobile
				}
			},
			_customer() {
				uni.makePhoneCall({
					phoneNumber: this.customer
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}
	.version {
		font-size: 34rpx;

		.v-title {
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
			border-bottom: 1px solid #f4f4f5;
			padding: 30rpx 0;
		}

		.v-item {
			padding: 20rpx;
			text-align: center;
			border-bottom: 1px dashed #f4f4f5;
			
			.version-checked {
				float: right;
				margin-top: 6rpx;
			}
		}
		
		.active {
			color: #2979ff;
		}
	}

	.mine_box {
		background: url('@/static/mine_bg1.png') no-repeat center;
		background-size: 100% 100%;
		padding: 25rpx;
		padding-top: 0;
		padding-bottom: 50rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		margin-bottom: 0rpx;

		.portrait_box {
			display: flex;
			align-items: center;

			.portrait_name {
				display: flex;
				flex-direction: column;
				margin-left: 40rpx;

				text {
					font-size: 24rpx;
					color: #fff;
				}


				.Real_name {
					display: flex;
					justify-content: space-between;
					align-items: center;

					text {
						color: #010101;
						font-size: 24rpx;
					}

					.Real {
						padding: 5rpx 15rpx;
						border-radius: 50rpx;
						color: #fff;
						font-size: 18rpx;
						margin-left: 30rpx;
					}

					.v_ico {
						display: flex;
						align-items: center;

						image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 10rpx;
						}
					}

					.Version {
						padding: 5rpx 15rpx;
						border-radius: 50rpx;
						color: #fff;
						font-size: 18rpx;
						margin-left: 30rpx;
						display: flex;
						justify-content: flex-start;
					}
				}

				.name {
					font-size: 40rpx;
					margin-bottom: 20rpx;
					// color: #018afe;
					color: #1f1f1f;
					font-weight: bold;
				}
			}
		}

		.portrait_list {
			display: flex;
			margin-top: 55rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			flex-wrap: wrap;
			position: relative;

			.check {
				display: flex;
				align-items: center;
				position: absolute;
				right: 40rpx;
				top: 50%;
				transform: translate(0%, -50%);
				background-color: #ffeede;
				padding: 20rpx 40rpx;
				padding-right: 0;
				border-radius: 100px;
				font-size: 24rpx;
				color: #fd7a04;

				.triangle {
					width: 16rpx;
					height: 24rpx;
					padding-left: 20rpx;
					margin-right: 20rpx;
				}
			}

			.portrait_cont {

				background-image: linear-gradient(#fff8f2, #fffcf9);
				// background-color: #df9825;
				padding: 40rpx;
				position: relative;
				height: 205rpx;
				border: 4rpx solid #fff;
				display: flex;
				flex-direction: column;
				border-radius: 20rpx;
				flex: 1;
				box-sizing: border-box;
				min-width: 20%;

				text {
					font-size: 28rpx;
					color: #666666;
				}

				.nmb {
					margin-top: 20rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: #fc7a02;
				}
			}

			.portrait_cont:not(:first-child):before {
				position: absolute;
				content: '';
				left: 0;
				height: 40rpx;
				width: 1px;
				background-color: #dfe6fc;
			}
		}
	}

	.mine_list_box {
		padding: 30rpx 0;
		box-sizing: border-box;

		.mine_list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: #eee 0px solid;
			padding: 40rpx 40rpx;
			box-sizing: border-box;
			background-color: #ffffff;

			.list {
				display: flex;
				align-items: center;

				text {
					font-size: 32rpx;
					margin-left: 20rpx;

				}

				image {
					width: 46rpx;
					height: 46rpx;
				}
			}
		}

		.m_t_30 {
			margin-bottom: 30rpx;
		}

		.phone_box {
			box-sizing: border-box;

			.phone {
				margin-bottom: 20rpx;
				border-bottom: #eee 1px solid;
				padding: 30rpx;
			}

			.avatar_box {
				margin-bottom: 30rpx;

				text {
					border-bottom: #eee solid 1px;
					padding: 20rpx 0;
					margin: 0;
				}
			}

			text {
				font-size: 32rpx;
				color: #1296db;
				text-align: center;
				display: block;
				margin-bottom: 30rpx;
				transition: all 0.5s;
			}

			text:active {
				background-color: #ebebeb;
			}
		}
	}

	.mine_head {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;

		view {
			width: 335rpx;
			height: 166rpx;
			border-radius: 15rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}
</style>